<template>
  <div class="container">
    <el-dialog
      title="红包充值记录"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <p>当前可用红包余额: <span>{{ balance }}</span></p>
      <el-table
        :data="tableData"
        style="width:100%"
        max-height="450"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column prop="createdAt" label="日期" />
        <el-table-column prop="money" label="充值红包余额" />
        <el-table-column prop="remark" label="充值来源" />
      </el-table>
      <el-col :span="24">
        <div class="pagination">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          />
      </div>
    </el-col>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    balance: {
      default: 0
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible:false,
      pageNum: 1,
      pageSize: 20
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    pageChange(page) {
      this.$emit('hbPageChange', page)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  ::v-deep .el-dialog__body {
    padding: 15px 40px;
    height: 570px;
  }
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ddd;
  }
  p {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    span {
      color: #f4222d;
    }
  }
  .pagination {
    float: right;
    margin-top: 10px;
  }
}
</style>